<template>
  <view>
	  <!-- 公共组件-每个页面必须引入 -->
	  <public-module></public-module>
	   <div class="login-page">
		   <div class="logo-text">
			   <div style="font-size:34px">Hello!</div>
			   自己人的塑料产业平台！
		   </div> 
		
		   <u--form labelPosition="left" :model="form" :rules="rules" ref="form" labelWidth="0" errorType="toast">
			<div>
				<u-form-item label=" " prop="mobile">
					<u-input placeholder="请输入手机号" fontSize="26rpx" shape="circle" border="none" :customStyle="style" v-model="form.mobile"></u-input>
				</u-form-item>
				<u-form-item  label="" prop="code">
					<u--input placeholder="请输入验证码" v-model="form.code" fontSize="26rpx" shape="circle" border="none" :customStyle="style" >
						<template slot="suffix">
							<u-button @click="handleSendLoginSMSCode" :disabled="sendCode" :text="verifyCodeText" size="mini" type="success"></u-button>
						</template>
					</u--input>
				</u-form-item>	
				<u-form-item  label="" prop="password">
					<u--input placeholder="请输入密码" v-model="form.password" fontSize="26rpx" shape="circle" border="none" :customStyle="style" type="password">
					</u--input>
				</u-form-item>	
				<u-form-item  label="" prop="userRealname">
					<u--input placeholder="请输入姓名" v-model="form.userRealname" fontSize="26rpx" shape="circle" border="none" :customStyle="style" >
					</u--input>
				</u-form-item>	
				
			</div>
		   </u--form>
		   <div class="zc-left">
			  <div style="display: flex;justify-content: flex-start;align-items: center;width:300px">
				 <div>
					 <u-checkbox-group v-model="isAgree">
						  <u-checkbox  label="阅读并同意" :name="true" > </u-checkbox>   
					 </u-checkbox-group>
					
				 </div>
				 <div class="treaty" @click="showPop('service')" style="font-size:14px;color:#409EFF;cursor: pointer;text-decoration: none">服务协议，</div>
				 <div class="treaty" @click="showPop('privacy')" style="font-size:14px;color:#409EFF;cursor: pointer;text-decoration: none">隐私声明</div>
			  </div>
			</div>
		   <div style="margin-top:50rpx;">
				<u-button text="立即注册" v-if="isAgree[0]"  color="linear-gradient(180deg, #FFA470 0%, #FF5E01 100%)" shape="circle" @click="handleRegister" :loading="btnLoading"></u-button>
				<u-button text="立即注册" v-else  color="#eee" shape="circle" ></u-button>
		   </div>
		   <div class="login-two">
			   <div>已有账号<span style="color:#FF5E01;cursor: pointer;" @click="topage('/pagesCommon/login')">去登录</span></div>  
		   </div>
	   </div>
	  
	  <u-popup :show="show" :round="10" mode="bottom" @close="show=false">
			<div style="height:80vh;padding:40rpx;line-height: 1;font-size: 28rpx;color:#666;overflow-y: auto;">
				<div style="font-size:32rpx;font-weight: bold;margin-bottom: 40rpx;">{{title}}</div>
				<div  v-html="con"></div>
			</div>
		</u-popup>
  </view>

</template>

<script>
	const defaultForm = {
	  mobile: '',
	  password:'',
	  code:'',
	  userRealname:''
	};
  import { mapState, mapMutations } from 'vuex';
  import {login,sendSms ,register,agreementDetail} from '@/config/api.js'
  import store from '@/store';
  import md5 from "@/config/md5.js";
  export default {
    components: {
      
    },
	
	data() {
		
		return {
	       type:'code',
		   form:JSON.parse(JSON.stringify(defaultForm)),
		   style:{
			   background:'#F6F6F6',
			   padding:'0 40rpx',
			   height:'80rpx'
		   },
		   rules:{
			   code: [{
						required: true,
						message: '请输入验证码',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['blur', 'change']
					}],
			  userRealname: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['blur', 'change']
				    }],
			   mobile: [{
					required: true,
					message: '请输入手机号',
					// 可以单个或者同时写两个触发验证方式
					trigger: ['blur', 'change']
				},
				{
					// 自定义验证函数，见上说明
					validator: (rule, value, callback) => {
						// 上面有说，返回true表示校验通过，返回false表示不通过
						// uni.$u.test.mobile()就是返回true或者false的
						return uni.$u.test.mobile(value);
					},
					message: '手机号码不正确',
					// 触发器可以同时用blur和change
					trigger: ['change','blur'],
				}],
				password: [{
					required: true,
					message: '请输入密码',
					// 可以单个或者同时写两个触发验证方式
					trigger: ['blur', 'change'],
					},
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							if(value.length < 3){
								return false
							}else{
								return true
							}
						},
						message: '密码长度不小于3',
						// 触发器可以同时用blur和change
						trigger: ['change','blur'],
					}],
				
			},
		   btnLoading:false,
		   sendCode:false,//是否能发送验证码
		   falg: false, //是否倒计时
		   reciprocalTime : null,//倒计时函数
		   verifyCodeText:'获取短信验证码',
		   timer: 60,//倒计时秒数
		   isAgree:[false],
		   show:false,
		   con:'',
		   title:''
		};
	},
	async onLoad(options) {
	
		// #ifdef MP
		this.$refs.uForm.setRules(this.rules)
		// #endif
	},
    methods: {
      ...mapMutations(['setUserInfo']),
	    showPop(type){
	        agreementDetail({agreementType:type}).then((res)=>{
	                this.con = res.agreementContent;
	                this.title =res.agreementTitle
	                this.show = true;
	        })
	      },
		  topage(url){
			  uni.navigateTo({
				 url: url
			  }) 
			  // this.$router.push({path:url})
		  },
	      /**
	       * 倒计时
	       * @return null
	       */
	      showCountDown () {
	        this.verifyCodeText = this.timer + '秒后重新获取';
	        this.falg = true;
	        let self = this;
	        self.reciprocalTime = function(time){
	          //@ts-ignore : js setTimeout
	          setTimeout(() =>{
	            if(time >=1 && self.falg){
	              time--;
	              self.verifyCodeText=time + '秒后重新获取';
	              self.reciprocalTime(time);
	            }else{
	              self.verifyCodeText='获取短信验证码';
	              self.sendCode = false;
	              //@ts-ignore : js clearTimeout
	              clearTimeout(self.reciprocalTime);
	            }
	          },1000);
	        };
	        self.reciprocalTime(this.timer);
	      },
	  
	      /**
	       * 发送验证码
	       */
	      handleSendLoginSMSCode(){
	        if(!uni.$u.test.mobile(this.form.mobile)){
	          uni.showToast({
	          	title:'请输入正确的手机号',
	          	icon:'none'
	          })	
	          return
	        }
	        this.sendCode = true;
			console.log("md5",md5)
	        let encryption =  md5.hex_md5(this.form.mobile + 'moresu.,!');
	        sendSms({mobile:this.form.mobile,encryption,type:'REGISTER'}).then(()=>{
				uni.showToast({
					title:'验证码已发送',
					icon:'none'
				})
	          this.showCountDown();
	        }).catch(()=>{
	          this.sendCode = false;
	        })
	  
	      },
    
	    changeType(type){
	         this.type = type ;
			 this.form = JSON.parse(JSON.stringify(defaultForm))
			 this.verifyCodeText='获取短信验证码';
			 this.sendCode = false;
			 //@ts-ignore : js clearTimeout
			 clearTimeout(this.reciprocalTime);
			 this.falg = false
	      },
		  
		 
           
		handleRegister() {
             this.$refs.form.validate().then(res => {
                this.btnLoading = true;
                let pamas = {};
                pamas.mobile = this.form.mobile;
			    pamas.password = this.form.password;
			    pamas.userRealname = this.form.userRealname;
			    pamas.code = this.form.code
                register(pamas).then((data)=>{
                    this.btnLoading = false;
					uni.showToast({
						title:'注册成功，去登录',
						icon:'none'
					})
					uni.navigateTo({
						 url: '/pagesCommon/login'
					}) 
					// this.$router.push({path:'/pagesCommon/login'})
                   
                }).catch((err)=>{
                  this.btnLoading = false;
                })
            })
          },
		  
		  
      },
	  
   
  }
</script>

<style lang="scss">
	@import '@/style/common.scss';
	.login-page{
		padding: 0 40rpx;
		background: url('https://pic.moresu.com/FnqTgF_D7dstwjAKWgKbd0eOCIG9') no-repeat top left #fff;
		background-size: cover;
		height:100vh;	
		.logo-text{
			color:#FF5E01;
			font-size:34rpx;
			font-weight: bold;
			padding:110rpx 0 60rpx 50rpx;
		}
		.logo-title{
			height:60rpx;
			overflow: hidden;
			.title-item{
				float:left;
				font-size: 25rpx;
				color: #070D14;
				cursor: pointer;
				margin-left:50rpx;
				cursor: pointer;
			}
			.title-item.choose{
				font-weight: bold;
				font-size:27rpx;
				position: relative;
			}
			.title-item.choose:before{
				content: ' ';
				position: absolute;
				bottom:-6rpx;
				left:50%;
				margin-left:-33rpx;
				width: 66rpx;
				height: 16rpx;
				background: rgba(255,164,112,0.8);
				border-radius: 8rpx;	
			}
		}
		.login-two{
			@include flexbox(space-between,center);
			font-size: 23rpx;
			color: #8B8B8B;
			margin-top:40rpx;
		}
	}
	
	
</style>